<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.user" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="区域">
        <el-select v-model="formInline.region" placeholder="区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="apply = true" v-loading="loading"
          >申请</el-button
        >
        <el-dialog title="活动申请表" :visible.sync="apply" v-draggable>
          <el-form
            status-icon
            :rules="rules"
            ref="form"
            :model="form"
            label-width="80px"
          >
            <el-form-item label="活动编号" prop="id">
              <el-input
                placeholder="请输入编号"
                v-model="form.id"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="活动名称" prop="name">
              <el-input
                placeholder="请输入活动名称"
                v-model="form.name"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="活动邮箱">
              <el-input
                placeholder="请输入活动邮箱"
                v-model="form.mail"
                clearable
                ><template slot="append">@163.com</template></el-input
              >
            </el-form-item>
            <el-form-item label="活动区域">
              <el-select
                v-model="form.region"
                placeholder="请选择活动区域"
                clearable
                multiple
              >
                <el-option label="shanghai" value="区域一"></el-option>
                <el-option label="beijing" value="区域二"></el-option>
                <el-option label="西安" value="区域三" disabled></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动时间" required>
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="form.date1"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2"></el-col>
              <el-col :span="11">
                <el-form-item prop="date2">
                  <el-time-picker
                    placeholder="选择时间"
                    v-model="form.date2"
                    style="width: 100%"
                  ></el-time-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="配送方式">
              <el-switch
                v-model="form.delivery"
                active-text="即时配送"
                inactive-text="延时配送"
              ></el-switch>
            </el-form-item>
            <el-form-item label="活动性质">
              <el-checkbox-group v-model="form.type" :min="0" :max="3">
                <el-checkbox
                  label="美食/餐厅线上活动"
                  name="type"
                ></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox
                  label="单纯品牌曝光"
                  name="type"
                  disabled
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源">
              <el-radio-group v-model="form.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
                <el-radio disabled label="众筹"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式">
              <el-input
                placeholder="请输入内容"
                :disabled="true"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                v-model="form.desc"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="活动难度">
          <el-rate v-model="difficulty" show-text></el-rate>
        </el-form-item> -->
          </el-form>
          <el-dialog
            width="30%"
            title="提示"
            :visible.sync="prompt"
            append-to-body
            center
          >
            <span>确定要提交吗？</span>
            <div slot="footer" class="dialog-footer">
              <el-button @click="aprompt = false">取 消</el-button>
              <el-button type="primary" @click="prompt = false"
                >确 定</el-button
              >
            </div>
          </el-dialog>
          <div slot="footer" class="dialog-footer">
            <el-button @click="apply = false">取 消</el-button>
            <el-button type="primary" @click="prompt = true">提交</el-button>
          </div>
        </el-dialog>
      </el-form-item>
    </el-form>
    <el-empty></el-empty>
  </div>
</template>

<script>

export default {
  data () {
    return {
      loading: false,
      formInline: {
        user: '',
        region: ''
      },
      apply: false,
      prompt: false,
      form: {
        id: '',
        name: '',
        mail: '',
        region: [],
        date1: '',
        date2: '',
        delivery: true,
        type: [],
        resource: '',
        desc: ''
        // difficulty: '1'
      },
      rules: {
        id: [
          { required: true, message: '请输入活动编号', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('查询成功')
    }
    // apply () {
    //   this.$router.push('/two/apply')
    // }
  }
}
</script>
<style scoped lang="less">
.dialog-footer {
  display: flex;
  justify-content: center; /* 水平居中 */
}
</style>
